<!--
*@Author: zt
*@Description: 应急导航
*@Date: 2024-09-20
-->
<template>
  <a-layout class="f-h-100">
    <a-layout-content style="overflow: auto">
      <u-busi-card
        v-for="it in navigates"
        :title="it.title"
        class="f-margin-b12 f-padding-b12"
        style="background-color: unset"
      >
        <a-list
          :grid="{ gutter: 12, xs: 3, sm: 3, md: 3, lg: 4, xl: 5, xxl: 5 }"
          :data-source="it.children"
        >
          <template #renderItem="{ item }">
            <a-list-item
              style="padding: 0"
              class="f-item-hover"
              @click="toJump(item)"
            >
              <a-card style="cursor: pointer; height: 104px">
                <a-row :gutter="16" style="height: calc(104px - 48px)">
                  <a-col flex="56px">
                    <a-image
                      :width="56"
                      :height="56"
                      :preview="false"
                      :src="item.filepath"
                      v-if="item.filepath"
                      style="border-radius: 8px"
                    />
                  </a-col>
                  <a-col
                    flex="1"
                    style="display: flex; align-items: center; overflow: hidden"
                  >
                    <span class="u-span-title" :title="item.title">
                      {{ item.title }}
                    </span>
                  </a-col>
                </a-row>
              </a-card>
            </a-list-item>
          </template>
        </a-list>
      </u-busi-card>
    </a-layout-content>
  </a-layout>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import dayjs from 'dayjs';
import * as navigationApi from '@/service/navigation/index';

const router = useRouter();

const navigates = ref<any[]>([
  {
    title: '相关业务系统',
    children: [],
  },
]);

onMounted(() => {
  getSearch(1);
});

// 获取列表数据
const getSearch = async (current?: number) => {
  let pagenation = reactive({
    total: 0,
    current: 1,
    pageSize: 500,
    showTotal: total => `共 ${total} 条`,
  });
  let searchF = reactive({
    model: {},
  });
  let tform = JSON.parse(JSON.stringify(searchF));
  const res = await navigationApi.page({
    ...pagenation,
    size: pagenation.pageSize,
    ...tform,
  });
  if (res.code == 0) {
    const arr = res.data.records;
    arr.sort((a, b) => dayjs(a['createtime']) - dayjs(b['createtime']));
    navigates.value[0].children = [];
    arr.map(e => {
      navigates.value[0].children.push({
        title: e.name,
        content: e.content,
        filepath: e.filepath,
        path: e.url,
        type: 'newWindow',
      });
    });

    pagenation.total = res.data.total;
  }
};

// 切割字符串
function lengthCutting(str, num) {
  let strArr = [];

  for (let i = 0; i < str.length; i += num) strArr.push(str.slice(i, i + num));
  return strArr;
}

// 快速跳转
const toJump = data => {
  if (data.type == 'newWindow') {
    window.open(data.path);
  } else {
    router.push({
      path: data.path,
      query: {
        _tab: 1,
      },
    });
  }
};
</script>

<style lang="scss" scoped>
.u-item-icon {
  width: 56px;
  height: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 16px 16px 16px 16px;
  text-align: center;
}

.u-span-title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.u-span-desc {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
}
</style>
